/*
 * Copyright 2018 Expedia Group
 *
 *       Licensed under the Apache License, Version 2.0 (the "License");
 *       you may not use this file except in compliance with the License.
 *       You may obtain a copy of the License at
 *
 *           http://www.apache.org/licenses/LICENSE-2.0
 *
 *       Unless required by applicable law or agreed to in writing, software
 *       distributed under the License is distributed on an "AS IS" BASIS,
 *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *       See the License for the specific language governing permissions and
 *       limitations under the License.
 *
 */

@import (reference) '../../app';

.alert-counter {
  position: absolute;
  margin-left: @spacing-xs;
  margin-top: @spacing-xxs
}

.alerts-title__header {
  font-size: @font-size-h3;
  line-height: 1.2;
}

.alert-details__alert-glow  {
  animation: glow 700ms ease-out infinite alternate;
}

@keyframes glow {
  0% {
    border-left: 3px solid @white;
  }
  100% {
    border-left: 3px solid @brand-danger;
  }
}

.alerts-table .react-bs-table .table-bordered > tbody > tr > td {
  vertical-align: middle;
}

.alerts-table .sparkline-container .sparkline-graph {
  height: 40px;
}
.alerts__bold {
  font-weight: 600;
}

.table__large-label {
  font-size: 90%
}

.subscriptions {
  margin-bottom: @spacing-m;
}

.subscriptions__table.table {
  margin-bottom: @spacing-s;
}

.alert-details-container_header {
  margin-bottom: @spacing-m;
}

.alerts-table.react-bs-table-container {
  margin-top: 0
}

.alerts-table {
  th[data-field] {
    padding: 0 @spacing-s @spacing-s 0;

    input, select {
      .input-sm;
      padding-left: @spacing-xs;
      border: 1px solid @gray-mid-light;
      border-radius: 3px;
      background-color: white;
      color: @gray-darker;
    }
  }
}

.alert-table_sparkline {
  margin-top: -1px;
  margin-bottom: -7px;

  color: @gray-mid-light;
}

.alert-table_sparkline-loading {
  color: @gray-mid-light;
}

.alerts-toolbar__time-range-selector {
  margin-bottom: @spacing-xs;
}
.alert-tabs {
  margin-bottom: @spacing-s;
  font-size: 16px;
  .nav-tabs > li > a {
    padding-top: 0;
    padding-left: 0;
    padding-right: @spacing-l;
  }
}

.alert-tabs_tab:focus {
  outline: none;
}

.alerts-slack-icon {
  height: 16px;
  width: 16px;
  margin-top: -3px;
}

.alert-details__select {
  margin-top: 6px;
  padding-left: 5px;
  background-color: @white;
  display: inline-block;
  width: 100%;
  .Select-placeholder {
    color: @white;
  }
}

.alert-details__input {
  background-color: @white;
  width: 100%;
}

.subscription-button {
  display: inline;
}

.subscription-error {
  color: red;
  font-weight: 600;
  width: 50%;
  float: right;
}

.alert-subscription-handle {
  width: 100%;
  border: 0;
  padding-left: 4px;
  &::-webkit-input-placeholder {
    color: @gray-dark;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: @gray-dark;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: @gray-dark;
  }
}

.alerts-table .react-bs-table .table-bordered > tbody > tr > td {
  height: 56px;
}